<template>
    <div class="main_body">
        <div class="header">
            <span style="margin-right:23.5vw; cursor:pointer;color: white ">
                平台总览
            </span>
            <span @click="jumpArchitecture" style="margin-left: 23.5vw;cursor:pointer ">
                平台架构
            </span>
        </div>
        <!--第一行-->
        <div class="div-row-1">
            <div class="div-row-1-col-1">
              <span style="width: auto; height: 3.7vh; margin-left: 1.04vw;color: #01D7D5">AI对接详情</span>
              <div class="calculation-force-trigger">
                <div class="calculation-force-trigger-div">
                  <div class="calculation-force-trigger-div-span">
                    <span>口罩识别</span>
                    <span>1230 次</span>
                  </div>
                  <div class="calculation-force-trigger-div-div">
                    <div style=" width: calc( 16.2vw * 1230 /1288 ); background:linear-gradient(to right,rgba(170,0,255,0.0),#00FF2A);"  class="calculation-force-trigger-div-div-1" />
                    <div style="left:calc( 16.2vw * 1230 /1288 - 0.1vw);  border:2px solid #00FF2A;" class="calculation-force-trigger-div-div-2">
                      <div></div>
                    </div>
                  </div>
                </div>
                <div class="calculation-force-trigger-div">
                  <div class="calculation-force-trigger-div-span">
                    <span>河道区域闯入</span>
                    <span>788 次</span>
                  </div>
                  <div class="calculation-force-trigger-div-div">
                    <div style=" width: calc( 16.2vw * 788 /1288 ); background:linear-gradient(to right,rgba(255,89,0,0.0),#FF5900);"  class="calculation-force-trigger-div-div-1" />
                    <div style="left:calc( 16.2vw * 788 /1288 - 0.1vw);  border:2px solid #FF5900;" class="calculation-force-trigger-div-div-2">
                      <div></div>
                    </div>
                  </div>

                </div>
                <div class="calculation-force-trigger-div">
                  <div class="calculation-force-trigger-div-span">
                    <span>抽烟检测</span>
                    <span>6 次</span>
                  </div>
                  <div class="calculation-force-trigger-div-div">
                    <div style=" width: calc( 16.2vw * 6 /1288 ); background:linear-gradient(to right,rgba(0,255,42,0.0),#0044FF);"  class="calculation-force-trigger-div-div-1" />
                    <div style="left:calc( 16.2vw * 6 /1288 - 0.1vw);  border:2px solid #0044FF;" class="calculation-force-trigger-div-div-2">
                      <div></div>
                    </div>
                  </div>
                </div>
                <div class="calculation-force-trigger-div">
                  <div class="calculation-force-trigger-div-span">
                    <span>垃圾处理不规范</span>
                    <span>1288 次</span>
                  </div>
                  <div class="calculation-force-trigger-div-div">
                    <div style=" width: calc( 16.2vw * 1288 /1288 ); background:linear-gradient(to right,rgba(255,89,0,0.0),#FF0000);"  class="calculation-force-trigger-div-div-1" />
                    <div style="left:calc( 16.2vw * 1288 /1288 - 0.1vw);  border:2px solid #FF0000;" class="calculation-force-trigger-div-div-2">
                      <div></div>
                    </div>
                  </div>
                </div>
                <div class="calculation-force-trigger-div">
                  <div class="calculation-force-trigger-div-span">
                    <span>厨师帽识别</span>
                    <span>862 次</span>
                  </div>
                  <div class="calculation-force-trigger-div-div">
                    <div style=" width: calc( 16.2vw * 862 /1288 ); background:linear-gradient(to right,rgba(255,89,0,0.0),#FF00FB);"  class="calculation-force-trigger-div-div-1" />
                    <div style="left:calc( 16.2vw * 862 /1288 - 0.1vw);  border:2px solid #FF00FB;" class="calculation-force-trigger-div-div-2">
                      <div></div>
                    </div>
                  </div>
                </div>
                <div class="calculation-force-trigger-div">
                  <div class="calculation-force-trigger-div-span">
                    <span>厨师服识别</span>
                    <span>985 次</span>
                  </div>
                  <div class="calculation-force-trigger-div-div">
                    <div style=" width: calc( 16.2vw * 985 /1288 ); background:linear-gradient(to right,rgba(183,255,0,0.0),#B7FF00);"  class="calculation-force-trigger-div-div-1" />
                    <div style="left:calc( 16.2vw * 985 /1288 - 0.1vw);  border:2px solid #B7FF00;" class="calculation-force-trigger-div-div-2">
                      <div></div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
            <div class="div-row-1-col-2">
              <div class="class—parentheses-left">
                <img  height="100%" width="100%" src="../../../assets/img/bigData2.0/parentheses_left.png" alt="">
              </div>
              <tszcMap @devicePlay="devicePlay" />
              <div class="class—parentheses-right">
                <img  height="100%" width="100%" src="../../../assets/img/bigData2.0/parentheses_right.png" alt="">
              </div>
            </div>
            <div class="div-row-1-col-3">
              <span style="width: auto; height: 3.7vh; margin-right: 1.04vw;color: #01D7D5">设备总览</span>
<!--                <img style="width: auto; height: 3.7vh; margin-right: 1.04vw" src="../../../assets/img/bigData2.0/sbzl.png" alt="">-->
                <div style="width: 100%;  height:100%;">
                    <!--设备数-->
                    <div style="width: 100%;  height:calc( 100% -  20vh); display: flex">
                        <div style="width: 8vw; height: 100%; position: relative;" >
                            <div class="device-jumping">
                                <img style="width: 5.6vw; height: auto" src="../../../assets/img/bigData2.0/child/deviceIco.png" alt="">
                            </div>
                            <img style="position: absolute; bottom:0vw; width: 8vw; height: auto" src="../../../assets/img/bigData2.0/child/deviceBottom.png" alt="">
                        </div>
                        <div style="width: calc(100% - 8vw); height: 100%;display: flex; flex-direction: column; justify-content: flex-end ; align-items:center;"  >
                            <span style="font-size: 1.25vw;color: white">
                                设备总数
                            </span>
                            <span style="margin: 2vw 0; font-family: auto_digital;color: #12FFCC ;font-size: 3.3vw">
                                 {{this.countNum}}
                            </span>
                        </div>
                    </div>
                    <!--在线离线-->
                    <div style="width: 100%;  height:20vh; display: flex;">
                        <div style="position:relative;width: 50%; height: 75%;">
                            <img style="position: absolute; width: 105%; height: auto;bottom: 15%; left: -5% " src="../../../assets/img/bigData2.0/child/offLinebj.png" alt="">
                            <img style="position: absolute;width: 6.7vw; height: 3.3vw;  bottom: 32%; left: calc((100% - 6.7vw)/2)" src="../../../assets/img/bigData2.0/child/offLinebj1.png"  alt="">
                            <div style="position: absolute;width: 6.7vw; height: 3.3vw; left: calc((100% - 6.7vw)/2); top: 0; display: flex;  flex-direction: column; justify-content: center ; align-items:center; ">
                                <span  style="color: white;font-size: 0.83vw" >
                                    <span style="font-size: 1.25vw">{{(parseFloat((this.offLine / this.countNum)+``) * 100 ).toFixed(1) }}</span> %
                                </span>
                                <span  style="color: white; font-size: 0.83vw">
                                    {{this.offLine +'/'+ this.countNum}}
                                </span>
                            </div>
                            <div style="position: absolute; bottom: 0; width: 100%;text-align: center;color: white;bottom: 6%">
                                <span>
                                    离线数
                                </span>
                            </div>
                        </div>
                        <div style="position:relative;width: 50%; height: 75%;">
                            <img style="position: absolute; width: 105%; height: auto;bottom: 15%; left: -5% " src="../../../assets/img/bigData2.0/child/onLinebj.png" alt="">
                            <img style="position: absolute;width: 6.7vw; height: 3.3vw;  bottom: 32%; left: calc((100% - 6.7vw)/2)" src="../../../assets/img/bigData2.0/child/onLinebj1.png"  alt="">
                            <div style="position: absolute;width: 6.7vw; height: 3.3vw; left: calc((100% - 6.7vw)/2); top: 0; display: flex;  flex-direction: column; justify-content: center ; align-items:center; ">
                                <span  style="color: white;font-size: 0.83vw" >
                                    <span style="font-size: 1.25vw">{{((1 - parseFloat((this.offLine / this.countNum)+``)) * 100 ).toFixed(1)}}</span> %
                                </span>
                                <span  style="color: white; font-size: 0.83vw">
                                    {{this.onLine +'/'+ this.countNum}}
                                </span>
                            </div>
                            <div style="position: absolute; bottom: 0; width: 100%;text-align: center;color: white;bottom: 6%">
                                <span>
                                    在线数
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--第二行-->
        <div class="div-row-2">
            <div class="div-row-2-col-1">
              <span style="width: auto; height: 3.7vh; margin-left: 1.04vw;color: #01D7D5">各乡镇设备数据</span>
<!--              <img style="width: auto; height: 3.7vh; margin-left: 1.04vw" src="../../../assets/img/bigData2.0/gdssbsj.png" alt="">-->
              <deviceCountNum/>
            </div>
            <div class="div-row-2-col-3">
                <span style="width: auto; height: 3.7vh; margin-left: 1.04vw;color: #01D7D5">平台对接详情</span>
<!--                <img style="width: auto; height: 3.7vh; margin-right: 1.04vw" src="../../../assets/img/bigData2.0/ptdjxq.png" alt="">*/-->
                <div style="display: flex;flex-wrap:wrap">
                    <div class="platform">
                        <div style="width: 0.6vw;height: 0.6vw;background-color: #49C384; margin: 0 0.2vw"/>
                        <div>
                            <span style="color: #A4A8B0;font-size: 0.85vw">
                                智慧应急
                            </span>
                        </div>
                    </div>
                    <div class="platform">
                        <div style="width: 0.6vw;height: 0.6vw;background-color: #FFA13D; margin: 0 0.2vw"/>
                        <div>
                            <span style="color: #A4A8B0;font-size: 0.85vw">
                                智慧监管
                            </span>
                        </div>
                    </div>
                    <div class="platform">
                        <div style="width: 0.6vw;height: 0.6vw;background-color: #6D3DFF; margin: 0 0.2vw"/>
                        <div>
                            <span style="color: #A4A8B0;font-size: 0.85vw">
                                智慧生态
                            </span>
                        </div>
                    </div>
                    <div class="platform">
                        <div style="width: 0.6vw;height: 0.6vw;background-color: #2B8EF3; margin: 0 0.2vw"/>
                        <div>
                            <span style="color: #A4A8B0;font-size: 0.85vw">
                               智慧畜牧
                            </span>
                        </div>
                    </div>
                    <div class="platform">
                        <div style="width: 0.6vw;height: 0.6vw;background-color: #FF3B93; margin: 0 0.2vw"/>
                        <div>
                            <span style="color: #A4A8B0;font-size: 0.85vw">
                                智慧城管
                            </span>
                        </div>
                    </div>
                    <div class="platform">
                        <div style="width: 0.6vw;height: 0.6vw;background-color: #BEE5FB; margin: 0 0.2vw"/>
                        <div>
                            <span style="color: #A4A8B0;font-size: 0.85vw">
                               智慧安居小区
                            </span>
                        </div>
                    </div>
                </div>
                <div style=" width: 100%;height: 66%; ">
                  <tszcProject />



<!--                    <img style="position:absolute; width: 90%; height:auto;bottom: 6%; left: calc((100% - 90%)/2)" src="../../../assets/img/bigData2.0/piebase.png" alt="">-->
<!--                    <img style="position:absolute; width: 60%; height:auto;bottom: 21%; left: calc((100% - 60%)/2)" src="../../../assets/img/bigData2.0/pei3D.png" alt="">-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getDeviceInfoCount} from "@/api/bigData/bigDataApi";

    export default {
      data(){
          return{
              onLine:632,
              offLine:2178,
              countNum:2810,
              toPlay:false,
              deviceId:``,
              deviceName:`1324`,
          }
        },
      mounted() {
          //设备数量
            this.getDeviceInfo();
        },
        components:{
            deviceCountNum :() => import ('./child/deviceCountNum'),
            tszcMap :() => import ('./child/tszcMap'),
            tszcProject :() => import ('./child/tszcProject'),
        },
        name: "mainBody",

        methods: {
            getDeviceInfo() {
                let self = this;
                getDeviceInfoCount().then(res => {
                    // 将分页查询结果赋值给 tableData
                    if (res.success) {
                        self.countNum = res.data.deviceAllCount;
                        self.onLine = res.data.deviceOnCount;
                        self.offLine = res.data.deviceDeCount
                    }
                }).catch(err => { console.log(err); })

            },

            closePaly(){
                if (this.player) {
                    // 该方法会重置videojs的内部状态并移除dom
                    this.player.dispose();
                    this.videohtml = '';
                }
                this.toPlay=false;
            },

            devicePlay(deviceId,deviceName){
                //打开开关
                this.toPlay = true;
                console.log("子进来了",deviceId);
                console.log("子进来了",deviceName);

                let self = this;
                //全局
                self.deviceId = deviceId;
                self.deviceName = deviceName;
               getDeviceInfoPlay({deviceId:deviceId}).then(res => {
                   // loading.close();
                   // 将分页查询结果赋值给 tableData
                   if (res.success) {
                       let paramRul = JSON.parse(res.data);
                       console.log(paramRul);
                       self.url = paramRul.mediaUrl;
                       //弹窗延时加载
                       setTimeout(() => {
                           console.log("开始播放");
                           self.checkVideo(paramRul.mediaUrl);
                       }, 300);
                   }else {
                       console.log("错误!",res.message);
                       this.$message({
                           type: 'info',
                           message: res.message
                       });
                   }
               }).catch(err => {
                   console.log(err);
               })
            },
            jumpManagementSystem(){
                //转发到管理员登录页面
                this.$router.push({path: '/welcome', query:{}});
            },
            jumpArchitecture(){
                //转发到管理员登录页面
                this.$router.push({path: '/architectureForMp4', query:{}});
            },
            open(){
                this.videohtml = '<video  id="my-video"  class="video-js   vjs-default-skin" style="width: 100%; height: 100%; object-fit: fill" ></video>';
            },
            openvideo() {
                setTimeout(() => {
                    this.$nextTick(() => {
                        this.player = videojs("my-video", this.options);
                        console.log(`初始化完了`);
                        this.player.player()
                    });
                },300)
            },
            checkVideo(url) {
                this.boolOpen13465=false;
                let myPlayer = videojs("my-video");
                myPlayer.src([
                    {
                        type: "application/x-mpegURL",
                        src:url+``,
                    }
                ]);
                myPlayer.play();
            },

            test13246(){
                console.log(`报错了`);
                setTimeout(() => {
                    this.checkVideo(this.url);
                },500);

            },
        }
    }

</script>

<style  scoped>
    .main_body{
        background-size: 100% 100%;
        background-image: url(../../../assets/img/bigData2.0/bj.png);
        width: 100vw;
        height: 100vh;
        overflow: auto;
    }
    .header{
        background-size: 100% 100%;
        background-color:rgba(0,0,0,0);
        background-image: url(../../../assets/img/bigData2.0/header.png);
        width: 100vw;
        height: 9.26vh;
        display: flex;
        justify-content: center;
    }
    .header > span{
        font-size:1.3vw;
        color: #A5C9FF;
        font-family: PingFangSC-Semibold;
        line-height: 8vh;
    }
    .div-row-1{
        display: flex;
    }
    .div-row-1-col-1{
        width: 35.625vw;
        height: 46.66vh;
        /*background-color: yellow;*/
    }
    .div-row-1-col-2{
       /* width: 48.20vw;*/
        width:100%;
       /* margin-right: 4%;*/
       /* margin-top: 2.66vh;*/
       /* height: 46.66vh;*/
        /*background-color: blue;*/
      position: relative;

    }
    .class—parentheses-left{
      position: absolute;
      left: 4vw;
      height: 100%;
    }
    .class—parentheses-right{
      position: absolute;
      right: 4vw;
      top: 0;
      height: 100%;
    }

    .div-row-1-col-3{
        width: 28.145vw;
        height: 46.66vh;
        margin-right: 6%;
        /*background-color: red;*/
    }
    .div-row-2{
        display: flex;
    }
    .div-row-2-col-1{
        width: 90.864vw;
        height: 43vh;
    }
    .div-row-2-col-2{
       /* width: 40.9vw;*/
        width: 100%;
        height: 44vh;
    }
    .div-row-2-col-3{
      width: 24.145vw;
      height: 44vh;
      margin-right: 2%;
    }

    .device-jumping{
        width: 5.6vw;
        height: auto;
        padding:  3vw  calc((8vw - 5.6vw) / 2);
        animation: device-up 3s linear infinite;
    }
    @keyframes device-up {
        25% {transform: translateY(5px)}
        50%, 100% {transform: translateY(0)}
        75% {transform: translateY(-10px)}
    }

    @keyframes bounce-up {
        25% {transform: translateY(5px)}
        50%, 100% {transform: translateY(0)}
        75% {transform: translateY(-10px)}
    }
    .algorithm-list-div-span{
        position: absolute;
        bottom: 0;
        width: 5.2vw;
        text-align: center;
        font-family: 'PingFangSC-Semibold';
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
        color: #FFFFFF;
    }
    .calculation-force-trigger{
        width: 100%;
        height:calc(100% - 3.7vh);
        display: flex;
        flex-wrap:wrap;
        justify-content:  flex-start;
        align-content:stretch;
    }
    .calculation-force-trigger-div{
        width: 100%;
        height: calc(100% / 7);
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
    }
    .calculation-force-trigger-div-span{
        width: 16.2vw;
        height: auto;
        display: flex;
        justify-content: space-between;
        font-size: 0.72vw;
        font-weight: 500;
        line-height: 0.80vw;
        color: #FFFFFF;
    }
    .calculation-force-trigger-div-div{
        width: 16.2vw;
        height:0.42vw;
        margin: 0.5vw 0;
        background-color: rgba(112, 112, 112, 0.23);
        position:relative;
    }
    .calculation-force-trigger-div-div-1{
        width: 8.2vw;
        height:0.42vw;
        top: 0;
        left: 0;
        /* //从左到右*/
        background:linear-gradient(to right,rgba(0,221,255,0.0),#00C7FF);
        position:absolute;
    }
    .calculation-force-trigger-div-div-2{
        left:8.1vw;
        top: calc((100% - 1.25vw) / 2 - 0.10vw);
        width: 1.25vw;
        height: 1.25vw;
        border-radius : 1.25vw;
        background-color: #161616;
        border:2px solid #00C7FF;
        position:absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .calculation-force-trigger-div-div-2 > div{
        width: 0.45vw;
        height: 0.45vw;
        border-radius : 0.25vw;
        background-color: white;
        /*发光*/
        box-shadow: 0 0 5px #ffffff;
    }
    .platform{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33%;
        margin: 0.3vw 0;
    }
    .managementSystem{
        position: absolute;
        right: 12vw;
        top: 0;
        font-size:1.3vw;
        color: #A5C9FF;
        font-family: PingFangSC-Semibold;
        line-height: 8vh;
        cursor:pointer
    }

    .video-f{
        width: 30vw;height:15.6vw;
    }
    .nameLeft{
        position: absolute;
        left: -1.8vw;
        top: -1vw;
    }
</style>
